<template>
    <div class="body">
        <div class="box" v-for="(item, index) in concernList" :key="item.uid">

            <div class=" boxHeader">
                <div class="boxHeadLeft">
                    <img :src="item.toux" alt="" @click="changeDetails(item.uid)">
                    <span class="bao">{{ item.brand }}</span>
                </div>


                <span class="concern" @click="changeDetails(item.uid)">+关注</span>
            </div>

            <div class="boxContent">{{ item.Copywriting }}
            </div>

            <div class="boxImg">
                <img :src="item.img1" alt="" @click="changeDetails(item.uid)">
                <img :src="item.img2" alt="" @click="changeDetails(item.uid)">
                <img :src="item.img3" alt="" @click="changeDetails(item.uid)">
            </div>

            <div class="boxBottom">
                <span class="sp1">{{ item.username }}</span>
                <span class="iconfont icon-yanjing">{{ item.watch }}万人看过</span>
            </div>

        </div>
        <van-loading type="spinner" size="14px" text-size="12px" color="#000">加载中...</van-loading>
    </div>
</template>

<script setup>
import { useConcern } from '@/hooks/findHooks/useConcern.js'
let { changeDetails, concernList } = useConcern()
</script>

<style lang="scss" scoped>
.body {
    width: 100%;
    // margin-bottom: 100px;

    .box {
        width: 100%;
        color: rgba(80, 80, 80, 1);
        background-color: rgba(255, 255, 255, 1);
        border-bottom: rgba(243, 243, 243, 1) solid 1px;
        background-color: #fff;
        padding: 0 40px;
        display: flex;
        flex-direction: column;
        padding: 20px 0;
        box-sizing: border-box;

        .boxHeader {
            width: 100%;
            height: 48px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 18px;

            .boxHeadLeft {
                margin-left: 42px;
                display: flex;
                align-items: center;

                img {
                    width: 48px;
                    height: 48px;
                    margin-right: 30px;
                }

                .bao {
                    font-size: 28px;

                }
            }


            .concern {
                display: inline-block;
                width: 110px;
                height: 48px;
                color: rgba(255, 255, 255, 1);
                background-color: rgba(255, 141, 26, 1);
                border-radius: 16px;
                font-size: 28px;
                text-align: center;
                line-height: 48px;
                margin-right: 41px;
            }
        }

        .boxContent {
            font-size: 28px;
            line-height: 42px;
            margin-left: 10px;
            padding: 0 40px;
        }

        .boxImg {
            display: flex;
            justify-content: space-around;
            width: 100%;
            padding: 20px 40px 15px 40px;
            box-sizing: border-box;

            img {
                width: 210px;
                height: 140px;

            }

        }
    }

    .boxBottom {
        width: 100%;
        display: flex;

        .sp1 {
            padding-right: 54px;
            color: rgba(166, 166, 166, 1);
            font-size: 12px;
            line-height: 150%;
            padding: 0 52px 0 42px;
        }

    }
}

.iconfont {
    font-size: 12px;
    color: rgba(166, 166, 166, 1);
    height: 33px;
    line-height: 150%;
}

.van-loading {
    margin-top: 20px;
    text-align: center;
}
</style>